<template>
  <div class="app-container plant">
    <el-form size="small" inline>
      <el-form-item label="提交时间">
        <el-date-picker
          v-model="query.time"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="changeDate"
        >
        </el-date-picker>
      </el-form-item>
      <!--      <el-form-item label="所属地区" prop="region">
              <el-cascader
                style="width: 100%"
                :options="regionOptions"
                v-model="query.region"
                clearable
                :props="{ checkStrictly: true, value: 'id' }"
                placeholder="请选择工种"
              ></el-cascader>
            </el-form-item>-->
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">生成报告</el-button>
        <help></help>
      </el-form-item>
    </el-form>
    <h1 class="plant-title">
      “大名县”种植报告
      <span v-if="query.time" style="font-size: 12px">数据时间：{{ query.startTime }} 至 {{ query.endTime }}</span>
    </h1>
    <el-descriptions title="基础数据" :column="3" border>
      <el-descriptions-item label="土地数">{{ list.landTotal || 0 }}（块）</el-descriptions-item>
      <el-descriptions-item label="土地面积">{{ list.landArea || 0 }}（亩）</el-descriptions-item>
      <el-descriptions-item label="承包户数">{{ list.contractorTotal || 0 }}（户）</el-descriptions-item>
      <el-descriptions-item label="经营户数">{{ list.manageTotal || 0 }}（户）</el-descriptions-item>
      <el-descriptions-item label="大户数">{{ list.bigManageTotal || 0 }}（户）</el-descriptions-item>
    </el-descriptions>

    <div style="height: 30px"></div>
    <el-table border v-loading="loading" :data="list.list">
      <el-table-column align="center" label="乡镇名称" prop="name" />
      <el-table-column align="center" label="土地数" prop="total" />
      <el-table-column align="center" label="总亩数" prop="area" />
      <el-table-column align="center" label="承包户数" prop="contractorTotal" />
      <el-table-column align="center" label="经营户数" prop="manageTotal" />
    </el-table>
    <div style="height: 30px"></div>
    <el-descriptions title="种植数据" :column="3" border>
      <el-descriptions-item label="种植物种类">{{ list.plantType || 0 }}</el-descriptions-item>
      <el-descriptions-item label="种植总亩">{{ list.plantArea || 0 }}（亩）</el-descriptions-item>
      <el-descriptions-item label="种植率">{{ list.rate || 0 }}%</el-descriptions-item>
    </el-descriptions>
    <div style="height: 30px"></div>
    <div style="width: 500px; height: 400px; margin: 0 auto">
      <div style="width: 100%; height: 100%" ref="pie"></div>
    </div>
    <div style="height: 30px"></div>
    <el-descriptions title="top10种植物" :column="3" border></el-descriptions>
    <el-table border v-loading="loading" :data="[]">
      <el-table-column align="center" label="种植物名称" prop="landId" />
      <el-table-column align="center" label="申报种植面积（亩）" prop="address" />
      <el-table-column align="center" label="总亩预估产量（kg）" prop="useRange" />
      <el-table-column align="center" label="采收面积" prop="useRange" />
      <el-table-column align="center" label="经预估产量（kg）营户数" prop="east" />
    </el-table>
    <div style="height: 30px"></div>
    <el-table border v-loading="loading" :data="[]">
      <el-table-column align="center" label="乡镇名称" prop="landId" />
      <el-table-column align="center" label="种植1" prop="address" />
      <el-table-column align="center" label="种植1" prop="useRange" />
      <el-table-column align="center" label="种植1" prop="useRange" />
      <el-table-column align="center" label="种植1" prop="east" />
    </el-table>
    <div style="height: 30px"></div>
    <el-descriptions title="业务数据" :column="3" border>
      <el-descriptions-item label="业务数据申请数">0</el-descriptions-item>
      <el-descriptions-item label="业务数据处置率">0%</el-descriptions-item>
      <el-descriptions-item label="经营户申请数">{{ list.manageTotal || 0 }}</el-descriptions-item>
      <el-descriptions-item label="土地流转数据数">0</el-descriptions-item>
      <el-descriptions-item label="种植数据上报数">0</el-descriptions-item>
      <el-descriptions-item label="种植数据上报">{{ list.plantTotal }}</el-descriptions-item>
      <el-descriptions-item label="上报率">0%</el-descriptions-item>
      <el-descriptions-item label="采收数据上报">0</el-descriptions-item>
      <el-descriptions-item label="上报率">0%</el-descriptions-item>
    </el-descriptions>
    <div style="height: 30px"></div>
    <el-descriptions title="农资数据" :column="3" border>
      <el-descriptions-item label="农资订单数">0</el-descriptions-item>
      <el-descriptions-item label="农资销售金额">0%</el-descriptions-item>
      <el-descriptions-item label="供应商">0</el-descriptions-item>
      <el-descriptions-item label="供应种类">0</el-descriptions-item>
    </el-descriptions>
    <div style="height: 30px"></div>
  </div>
</template>

<script>
import plantApi from '@/api/plant/plant'

export default {
  name: 'plant',
  data() {
    return {
      loading: false,
      regionOptions: [], //所属地区
      list: [], //数据
      query: {
        time: '',
        startTime: '',
        endTime: ''
      }
    }
  },
  created() {
    this.getArea()
    this.getList()
  },
  mounted() {},

  methods: {
    changeDate(value) {
      this.query.startTime = value[0]
      this.query.endTime = value[1]
    },
    //所属地区
    getArea() {
      plantApi.getArea().then((res) => {
        this.regionOptions = res.data
      })
    },

    getList() {
      this.loading = true
      plantApi.plantInfo(this.query).then((res) => {
        this.list = res.data
        this.loading = false
        this.pie()
      })
    },
    pie() {
      const data = []
      for (let i = 0; i < this.list.plantChart.length; i++) {
        let obj = {}
        obj.name = this.list.plantChart[i].plant
        obj.value = this.list.plantChart[i].total
        data.push(obj)
      }

      console.log(data)
      var option = {
        title: [
          {
            text: '种植作物占比',
            left: 'center'
          }
        ],
        legend: {
          orient: 'vertical',
          x: 'right',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['50%', '50%'],
            data: data,
            label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 5
            },
            itemStyle: {
              borderRadius: 5
            },

            emphasis: {
              label: {
                show: true
              }
            }
          }
        ]
      }
      var myecharts = this.$echarts.init(this.$refs.pie)
      myecharts.setOption(option, true)
    }
  }
}
</script>

<style scoped lang="scss">
.plant {
  .plant-title {
    margin: 20px auto;
    text-align: center;
    font-size: 30px;
  }

  .main {
    font-size: 15px;
    border: 1px solid rgb(238 229 229);
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 20px;
  }
}
</style>